<template>
<div class="app-container">
<el-card shadow="never" class="panel">
<div slot="header" class="panel__header"><i class="el-icon-time panel__icon"></i><div class="panel__title">数据日志</div></div>


<el-form :inline="true" :model="q" class="mb12">
<el-form-item label="类型"><el-select v-model="q.type" clearable><el-option label="上传" value="upload"/><el-option label="下载" value="download"/><el-option label="审批" value="approve"/></el-select></el-form-item>
<el-form-item label="用户"><el-input v-model="q.user" clearable/></el-form-item>
<el-form-item><el-button type="primary" icon="el-icon-search" @click="fetch">查询</el-button></el-form-item>
</el-form>


<el-timeline v-if="timeline.length" class="mb12">
<el-timeline-item v-for="(item,i) in timeline" :key="i" :timestamp="item.time" placement="top">
<el-card shadow="never" class="compact">
<div><b>{{ item.title }}</b> — {{ item.user }}</div>
<div class="muted">{{ item.desc }}</div>
</el-card>
</el-timeline-item>
</el-timeline>


<el-empty v-else description="暂无日志"/>
</el-card>
</div>
</template>


<script>
import request from '@/utils/request'
export default { name:'DataLog', data(){ return{ q:{ type:'', user:'' }, timeline:[], loading:false } }, methods:{ async fetch(){ this.loading=true; try{ const res= await request({ url:'/log/data', method:'get', params:this.q }); this.timeline=(res.data||[]).map(x=>({ time:x.time, title:x.action, user:x.userName, desc:x.description })) }finally{ this.loading=false } } }, mounted(){ this.fetch() } }
</script>


<style scoped>
.panel{ border:1px solid #ebeef5 }
.panel__header{ display:flex; align-items:center; gap:8px }
.panel__icon{ color:#5d86ff }
.mb12{ margin-bottom:12px }
.compact{ padding:8px }
.muted{ color:#909399 }
</style>